import React from 'react';
import styles from './index.module.css';
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';

export default function HygieneDetail() {
  const navigate = useNavigate();
  const location = useLocation();
  const record = location.state?.record || {};
  console.log(record);

  return (
    <div className={styles.container}>
      {/* Header */}
      <div className={styles.header}>
        <div className={styles.backButton}>
          <LeftOutlined onClick={() => navigate(-1)} />
        </div>
        <div className={styles.title}>检查详情</div>
        <div className={styles.emptySpace}></div>
      </div>

      {/* Content Area */}
      <div className={styles.content}>
        {/* Title Section */}
        <div className={styles.titleSection}>
          <h1 className={styles.mainTitle}>{record.title}</h1>
          <div className={styles.info}>
            <span className={styles.label}>
              检查时间：{record.CheckTime.slice(0, 10)}
            </span>
            <span className={styles.value}>
              {record.date} {record.time}
            </span>
            <span className={styles.label} style={{ marginLeft: '20px' }}>
              检查区域
            </span>
            <span className={styles.value}>{record.area}</span>
          </div>
        </div>

        {/* Description Section */}
        <div className={styles.descriptionSection}>
          <p className={styles.description}>
            {record.content || '暂无描述内容'}
          </p>
        </div>

        {/* Image Section */}
        <div className={styles.imageSection}>
          {record.imgUrl && (
            <img src={record.imgUrl} alt="检查图片" className={styles.image} />
          )}
        </div>

        {/* Info List */}
        <div className={styles.infoList}>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>检查人</span>
            <span className={styles.infoValue}>{record.HyPeron}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>检查部门</span>
            <span className={styles.infoValue}>{record.HyBento}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>检查时间</span>
            <span className={styles.infoValue}>
              {record.CheckTime.slice(0, 10)}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
